<template>
	<view class="cart-page">
		<van-swipe-cell v-for="v, k in carts" :key="k">
			<van-card :price="v.price" :title="v.medicineName" 
			:desc="v.stipulate" class="goods-card" :thumb="v.image" :count="v.count">
				<template #footer>
					<van-checkbox-group v-model="result" style="position: relative;">
						<van-checkbox :name="v" class="onecheck" 
						style="padding-top: 14rpx;">选择</van-checkbox>
						<view style="display: flex;align-items: 
						center;justify-content: end;">
							<van-button icon="minus" size="mini" type="default"  min=""
							@click="updates(v,-1)"/>
							<span style="font-size: 30rpx;margin: 0 10rpx;">
							{{v.count}}</span>
							<van-button icon="plus" size="mini" type="primary" min=""
							@click="updates(v,1)"/>
						</view>
					</van-checkbox-group>
				</template>
			</van-card>
			<template #right>
				<van-button square text="删除" type="danger" 
				class="delete-button" style="height: 280rpx;" @click="ondel(v)"/>
			</template>
		</van-swipe-cell>
		<!-- 统计 -->
		<div class="wrap">
			<van-checkbox v-model="checked" @click="all">全选</van-checkbox>
			<view class="all">
				<view><span style="font-size: 30rpx;color: #8a8a8a;">
				总计:</span><span>{{count.p}}</span></view>
				<van-button color="rgb(0,158,255)" @click="gocheckout" >
				提交订单({{count.n}})</van-button>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {useStore} from 'vuex'
	import {onLoad} from '@dcloudio/uni-app';
	import {
		showDialog
	} from 'vant';
	import {
		ref,
		watch,
		computed
	} from 'vue'
	import api from '../../lib/request';
	// 变量
	let store = useStore()
	let result = ref([])//单选
	let checked = ref(false)//全选
	let carts = ref([])
	let token = uni.getStorageSync('token')
	let num = ref('')
	let id= ref(store.state.uid)
	let nowresult = ref(store.state.good)

	// 进入页面判断有没有登录
	onLoad(()=>{
		if (token) {
			api.get(`/shopping/findAll/${id.value}`).then(res=>{
				console.log(res.data);
				carts.value =res.data
			})
			
		} else {
			showDialog({
				title: '登录状态',
				message: '还未登录,是否登录?',
			}).then(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			});
		}
	})
	// 单选	
	watch(result, val => {
		checked.value = val.length == carts.value.length
		store.commit('update_good',val)
	})
	
	// 全选
	function all() {
		result.value = checked.value ? [...carts.value]:[]
	}
	
	
	//数量加减
	function updates(v,count) {
	    api.update('/shopping/update',{id:v.id,count:count}).then(res=>{
	        let {code,data} = res
	        if(code){
	            v.count = data.count
	        }
	    })
	}
// 总计
	const count = computed(() => {
		let n = 0
		let p = 0
		result.value.map(item => {
			n += item.count
			p += item.count * item.price
			
		})
		p = p.toFixed(2)
		store.commit('update_price',p)
		return{n,p}
		
	})
	
// 删除商品
	function ondel(v){
		api.del(`/shopping/delete/${v.id}`).then(res=>{
			console.log(res);
			let {code,data} =res
			if(code){
				carts.value=data
				console.log(data);
			}
		})
	}
	// 提交订单
	const gocheckout = () => {
		if(!result.value.length){
			uni.showToast({
				title: '请勾选商品',
			})
		}else{
			uni.navigateTo({
				url: '/pages/checkout/checkout'
			})
		}
	}
</script>

<style>
	.cart-page {
		height: calc(100vh - 141px);
		background-color: rgb(247, 248, 250);
		overflow-y: scroll;
	}

	.goods-card {
		margin: 0;
		background-color: #fff;
		/* box-shadow: 0 0 9px 5px #ccc; */
	}

	.van-card {
		margin-bottom: 20rpx;
		position: relative;
		padding: 40rpx;
		height: 280rpx;
	}

	/* 加减 */
	.van-stepper {
		position: absolute;
		bottom: 300rpx;
		right: 60rpx;
	}

	.onecheck {
		position: absolute;
	}

	.wrap {
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgb(245,245,245);
		position: fixed;
		bottom: 50px;

	}

	.wrap>span {
		margin: 0 30px;
		line-height: 53px;
	}

	.wrap>span:nth-child(2) {
		margin-left: 100px;
	}

	.wrap>.van-checkbox {
		padding: 20px;
	}

	.wrap>.all {
		display: flex;
		align-items: center;
		font-size: 40rpx;
	}

	.wrap>.all span {
		color: rgb(0, 158, 255);
		font-weight: bolder;
		margin-right: 40rpx;
	}
</style>